<template>
    <div >
        <scroll-view style='position: relative;height:100%;' class="scroll" scroll-y="true">

            <div style='position: relative; width:100%; height:164rpx;' v-for='(item,index) in addressList' :key='index'>

                <div class="product-name-wrap">

                    <div class="ui-list-item-info">

                        <span>{{item.consignee}}</span>

                        <span decode="true" space="true">&nbsp;&nbsp;</span>

                        <span>{{item.mobile}}</span>

                    </div>

                    <div class="ui-list-item-address">

                        <span>{{item.address}}</span>

                    </div>

                    <div class="ui-list-item-time">

                        <p class="ui-list-item-del" data-id="index" @click="delAddress(index)">删 除</p>

                    </div>

                    <div class="separate"></div>

                </div>

            </div>

        </scroll-view>

        <div class="add-address" @click="addAddress">
            <image class="add-img" src="/static/images/add.png" />
            <span>新增地址</span>
        </div>
    </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";

export default {
    components: {
        card
    },

    data() {
        return {
            addressList: []
        };
    },

    created() {},
    onLoad(options) {
        var that = this;

        var arr = wx.getStorageSync("addressList") || [];

        console.info("缓存数据：" + arr);

        // 更新数据
        console.log(this.addressList);
        that.addressList = arr;
    },
    /**
 
  * 生命周期函数--监听页面显示
 
  */
    onShow() {
        var that = this;

        var arr = wx.getStorageSync("addressList") || [];

        console.info("缓存数据：" + arr);

        // 更新数据
        console.log(this.addressList);
        that.addressList = arr;
    },

    methods: {
        addAddress: function() {
            wx.navigateTo({
                url: "../address/main"
            });
        },

        /* 删除item */

        delAddress: function(index) {
            var that = this;
            this.addressList.splice(index, 1);

            // 更新data数据对象

            if (this.addressList.length > 0) {
                that.addressList = this.addressList;

                wx.setStorageSync("addressList", this.addressList);
            } else {
                that.addressList = this.addressList;

                wx.setStorageSync("addressList", []);
            }
        }
    }
};
</script>

<style>
page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.scroll {
    height: 100%;
}

.product-name-wrap {
    margin: 0px 20rpx;
    font-size: 28rpx;
    color: #404040;
    height: 162rpx;
    /* position: relative; */
    border-bottom: 1px solid #eee;
}

.ui-list-item-info {
    /* margin: 20rpx 0px; */
    height: 80rpx;
    line-height: 80rpx;
}

.ui-list-item-address {
    color: #585c64;
    height: 80rpx;
    line-height: 80rpx;
}

.ui-list-item-time {
    /* margin: 5px 0px; */
    position: absolute;
    top: 1rpx;
    right: 1rpx;
    width: 100rpx;
    height: 50rpx;
}

.ui-list-item-time p {
    width: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
}

.ui-list-item-del {
    position: absolute;
    right: 20rpx;
    color: #585c64;
}

/*分割线*/

/* .separate {
  margin: 5px 0px;
  height: 2rpx;
  background-color: #f2f2f2;
} */

.add-address {
    width: 100%;
    height: 94rpx;
    line-height: 94rpx;
    color: #fff;
    background: #ff8d1a;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 1px;
}

.add-img {
    /* margin-right: 15rpx; */
    width: 47rpx;
    height: 47rpx;
}
</style>
